<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;
				width: 500px;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td{
				border: 1px solid red;
			}
			table#tab tr td a{
				cursor: pointer;
			}
			.box2{
				margin-top: 50px;
				width: 500px;
				border: solid 1px red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="kky" placeholder="请输入姓名" />
					</label><br />
					<label>
						年龄:<input type="number" value=0 />
					</label>
				</div>
				<div id="sex">
					性别<br />
					<label>
						男:<input type="radio" name="sex" value=0 checked />
					</label>
					<label>
						女:<input type="radio" name="sex" value=1 />
					</label>
				</div>
				<div id="hobby">
					爱好:<br />
					<label>
						学习 <input type="checkbox" value="h1" />
					</label>
					<label>
						健身 <input type="checkbox" value="h2" />
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" />
					</label>
					<label>
						工作 <input type="checkbox" value="h4" />
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" />
					</label>
					<div>
						<label>
							全选/全不选
							<input type="checkbox" id="checkAll" />
							<!-- <input type="checkbox" id="checkAll" onclick="fn111(this)"  /> -->
						</label>
						<button type="button" id="notCheck">反选</button>
					</div>
				</div>
				<div id="education">
					学历:<br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
					<button type="button" onclick="educationSleected()" id="educationSleected">设置学历</button>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<br />
			<br />
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>学历</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!-- <tr>
							<td>1</td>
							<td>kky</td>
							<td>18</td>
							<td>小哥哥</td>
							<td>大学</td>
							<td>学习,健身,游泳,工作,看电影</td>
							<td>
								<a onclick=upd({id:1})>编辑</a>
								<a onclick=del(i)>删除</a>
							</td>
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<div class="box2">
			<p>1、生命周期：
				1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。
				2）、localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
				3）、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
				2、网络流量：cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。
				3、大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M
				4、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。
				5、使用方便性上：WebStorage提供了一些方法，数据操作比cookie方便；
			</p>
		</div>
		<script>
			var arr = []; //用户存放数据

			//添加数据
			function add() {
				var userIpts = document.querySelectorAll("div#user>label input");
				//console.log("userIpts:",userIpts);
				var user = userIpts[0].value;
				var age = userIpts[1].value;
				localStorage.name = user;
				localStorage.age = age;
				var educationSleect = document.querySelector("#education>select")
				if (user && age) {
					var sex = getUserSex();
					console.log("sex:", sex);
					var hobby = getUserHobyy();
					var education = educationSleect.value;

					// console.log("user",user);;
					// console.log("age",age);
					// console.log("sex",sex);
					// console.log("hobby",hobby);
					var obj = {
						id: +new Date(),
						user: user,
						age: age,
						sex: sex,
						hobby: hobby,
						education: education
					}

					arr.push(obj);
					console.log("最新数据:", arr);
					showPage(arr);

				} else {
					alert("用户名和年龄不能为空");
				}
			}

			//获取用户输入的姓名和年龄
			function getUserSex() {
				var sexIpts = document.querySelectorAll("div#sex>label input");
				//console.log("sexIpts:",sexIpts);
				var sex;
				if (sexIpts[0].checked) {
					sex = sexIpts[0].value;
				} else {
					sex = sexIpts[1].value;
				}
				localStorage.sex = sex;
				return sex;
			}

			//获取用户的选取的爱好
			function getUserHobyy() {
				var hobbyIpts = document.querySelectorAll("div#hobby>label input");
				//console.log("hobbyIpts",hobbyIpts);
				var hobby = [];
				for (var i = 0; i < hobbyIpts.length; i++) {
					if (hobbyIpts[i].checked) {
						hobby.push(hobbyIpts[i].value);
					}
				}
				
				return hobby;
			}

			// 全选/全不选
			var checkAll = document.getElementById("checkAll");
			checkAll.onclick = function() {
				//console.log("this:",this);
				//console.dir(this);
				var f = this.checked;
				//console.log("f:",f);

				var ipts = document.querySelectorAll("div#hobby>label>input");
				//console.log("ipts:",ipts);//

				for (var i = 0; i < ipts.length; i++) {
					ipts[i].checked = f; //代表当前这个复选框被选中
				}
			}

			//反选
			var notCheck = document.getElementById("notCheck");
			notCheck.onclick = function() {
				var ipts = document.querySelectorAll("div#hobby>label>input");
				//console.log("ipts:",ipts);//
				for (var i = 0; i < ipts.length; i++) {
					ipts[i].checked = !ipts[i].checked; //当前这个复选框取反
				}
				fn1();
			}

			//是否需要选中 全选
			var ipts = document.querySelectorAll("div#hobby>label>input");
			for (var i = 0; i < ipts.length; i++) {
				ipts[i].onclick = function() {
					fn1();
				}
			}

			//
			function fn1() {
				var f = true;
				for (var a = 0; a < ipts.length; a++) {
					if (!ipts[a].checked) {
						f = false;
						break;
					}
				}
				checkAll.checked = f;
			}

			//渲染页面(table)
			function showPage(arr) {
				var tbody = document.getElementById("tbody");
				tbody.innerHTML = "";
				var trs = "";
				for (var i = 0; i < arr.length; i++) {
					trs +=
						`
						<tr>
							<td>${i}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex=="0"?"男":"女"}</td>
							<td>${setEducation(arr[i].education)}</td>
							<td>${setHobby(arr[i].hobby)}</td>
							<td>
								<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
								<a onclick=del(del(${i}))>删除</a>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML = trs;
			}

			//编辑
			function upd(obj) {
				console.log("你要修改的数据:", obj);
			}

			//删除
			function del(obj) {
				//用id去删除
				console.log(obj);

				var id = arr[obj].id;

				console.log(id);
				console.log(arr);
				for (var i = 0; i < arr.length; i++) {
					if (id == arr[i].id) {
						arr.splice(i, 1);
					}
				}
				localStorage.arr = JSON.stringify(arr);
				showPage(arr);
			}
			//返回学历
			/*
			<option value="e1">小学</option>
			<option value="e2">中学</option>
			<option value="e3">高中</option>
			<option value="e4">大学</option>
			*/
			function setEducation(attr) {
				var obj = {
					e1: "小学",
					e2: "中学",
					e3: "高中",
					e4: "大学",
				}
				console.log("attr:", attr, "obj[" + attr + "]:", obj[attr]);
				return obj[attr];
			}


			//返回爱好

			function setHobby(arr) {
				console.log("arr:", arr);
				var obj = {
					h1: "逛街",
					h2: "运动",
					h3: "吃美食",
					h4: "看书",
				}
				var str = "";
				for (var i = 0; i < arr.length; i++) {
					if (i == arr.length - 1) {
						str += obj[arr[i]];
					} else {
						str += obj[arr[i]] + ","
					}
				}
				console.log("str:", str)
				return str;
			}

			function educationSleected() {
				var educationSleected = document.getElementById("educationSleected");
				var educationSleect = document.querySelector("#education>select")
				educationSleect[i].selected = true;

			}
		</script>
	</body>
</html>
